<template>
  <div class="ev-container">
    <div class="l-box">
      <div class="search">
        <span>异常类型</span>
        <el-select v-model="abNormalType" placeholder="">
          <el-option v-for="item in abNormalOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="abnormal-list">
        <div class="abnormal-item" v-for="item in abNormalList">
          <div>
            <div>
              <span class="warning">{{ item.warningType }}</span> <span>{{ item.title }}</span>
            </div>
            <div class="warning">{{ item.status }}</div>
          </div>
          <div>
            <span>目标卫星</span>
            <span>{{ item.targetSatellite }}</span>
          </div>
          <div>
            <span>异常类型</span> <span>{{ item.abNormalType }}</span>
          </div>
          <div>
            <span>发生时间</span> <span>{{ item.time }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="r-box">
      <div class="r-top">
        <div><span class="warning"> 警告 </span> <span> 轨道面变更机动 </span></div>
        <div><span>目标卫星</span><span>DRAGSPHERE-1</span></div>
        <div><span>异常类型</span><span>变轨异常</span></div>
        <div><span>发生时间</span><span>2023-11-11 10:30:11</span></div>
        <div>
          <span>事件概述</span
          ><span
            >机动类型：轨道面调整+高度微调；原轨道：35786km（GEO）,经度16.5°W；新轨道：35770km，经度16.2°W；ΔV消耗：约8.2km/s；特征：GEO轨道带内精确位置调整，东西向漂移</span
          >
        </div>
      </div>
      <div class="title">意图及威胁分析</div>
      <div class="r-content">
        <div class="sub-title">增强对特定通信卫星的侦测能力</div>
        <div>
          <span>证据支撑</span
          ><span
            >调整后轨道位置与国际通信卫星IS-905(16.0°E)形成相对稳定位置；距离缩短至约50km，处于理想信号侦测范围；历史模式显示Luch系列卫星专门从事信号情报收集</span
          >
        </div>
        <div>
          <span>战术目的</span
          ><span>建立对IS-905卫星的持续信号监视；收集Ku/Ka波段通信信号；获取商业和军事通信情报</span>
        </div>
        <div class="detail">
          <div><span>威胁评分</span><span>82/100</span></div>
          <div><span>威胁类型</span><span>信号情报威胁</span></div>
          <div><span>影响范围</span><span>欧洲、中东、非洲通信</span></div>
          <div><span>紧急程度</span><span>高</span></div>
          <div>
            <span>具体威胁</span
            ><span
              >通信内容截获，可截获政府、军事、商业通信，潜在获取敏感外交和军事信息；信号特征分析，分析加密通信模式，识别通信协议弱点；基础设施侦察，映射关键通信链路，识别依赖该卫星的关键用户</span
            >
          </div>
        </div>
      </div>
      <div class="r-content">
        <div class="sub-title">规避空间态势感知监视</div>
        <div>
          <span>证据支撑</span
          ><span
            >调整后轨道位置与国际通信卫星IS-905(16.0°E)形成相对稳定位置；<br />距离缩短至约50km，处于理想信号侦测范围；<br />历史模式显示Luch系列卫星专门从事信号情报收集</span
          >
        </div>
        <div>
          <span>战术目的</span
          ><span>建立对IS-905卫星的持续信号监视；收集Ku/Ka波段通信信号；获取商业和军事通信情报</span>
        </div>
        <div class="detail">
          <div><span>威胁评分</span><span>82/100</span></div>
          <div><span>威胁类型</span><span>信号情报威胁</span></div>
          <div><span>影响范围</span><span>欧洲、中东、非洲通信</span></div>
          <div><span>紧急程度</span><span>高</span></div>
          <div>
            <span>具体威胁</span
            ><span
              >通信内容截获，可截获政府、军事、商业通信，潜在获取敏感外交和军事信息；<br />信号特征分析，分析加密通信模式，识别通信协议弱点；<br />基础设施侦察，映射关键通信链路，识别依赖该卫星的关键用户</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const abNormalType = ref('全部')
const abNormalOptions = ref([
  {
    label: '全部',
    value: '全部',
  },
])

const abNormalList = ref([
  {
    title: '轨道面变更机动',
    targetSatellite: 'DRAGSPHERE-1',
    abNormalType: '变轨异常',
    time: '2023-11-11 12:00:20',
    status: '待处理',
    warningType: '警告',
  },
  {
    title: '轨道面变更机动',
    targetSatellite: 'DRAGSPHERE-1',
    abNormalType: '变轨异常',
    time: '2023-11-11 12:00:20',
    status: '待处理',
    warningType: '警告',
  },
  {
    title: '轨道面变更机动',
    targetSatellite: 'DRAGSPHERE-1',
    abNormalType: '变轨异常',
    time: '2023-11-11 12:00:20',
    status: '待处理',
    warningType: '警告',
  },
  {
    title: '轨道面变更机动',
    targetSatellite: 'DRAGSPHERE-1',
    abNormalType: '变轨异常',
    time: '2023-11-11 12:00:20',
    status: '待处理',
    warningType: '警告',
  },
  {
    title: '轨道面变更机动',
    targetSatellite: 'DRAGSPHERE-1',
    abNormalType: '变轨异常',
    time: '2023-11-11 12:00:20',
    status: '待处理',
    warningType: '警告',
  },
  {
    title: '轨道面变更机动',
    targetSatellite: 'DRAGSPHERE-1',
    abNormalType: '变轨异常',
    time: '2023-11-11 12:00:20',
    status: '待处理',
    warningType: '警告',
  },
  {
    title: '轨道面变更机动',
    targetSatellite: 'DRAGSPHERE-1',
    abNormalType: '变轨异常',
    time: '2023-11-11 12:00:20',
    status: '待处理',
    warningType: '警告',
  },
])
</script>
<style lang="scss" scoped>
.ev-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  font-size: 14px;
  .l-box {
    .search {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 10px 0px 20px;
      span {
        width: 80px;
        text-align: left;
      }
    }
    .abnormal-list {
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      .abnormal-item {
        cursor: pointer;
        border-radius: 3px;
        .warning {
          color: rgb(255, 165, 0);
        }
        background: #3f5670;
        padding: 10px;
        &:hover {
          background: #4f6986;
        }
        & > div {
          display: flex;
        }
        & > div:first-child {
          justify-content: space-between;
          padding-bottom: 5px;
        }
        & > div:not(:first-child) {
          & > span:first-child {
            padding-right: 20px;
            color: #c7c7c7;
          }
        }
      }
    }
  }
  .r-box {
    padding: 10px 10px 10px 0;
    .title {
      font-size: 16px;
      display: flex;
      padding: 10px 0;
    }
    .r-top {
      .warning {
        color: rgb(255, 165, 0);
      }
      & > div:first-child {
        padding-bottom: 10px;
        & > span:first-child {
          padding-right: 20px;
        }
      }
      div {
        display: flex;
        padding-bottom: 5px;
      }
      & > div:not(:first-child) {
        & > span:first-child {
          padding-right: 20px;
          color: #c7c7c7;
        }
      }
    }
    .r-content {
      background: #3f5670;
      padding: 0 10px 10px 10px;
      .sub-title {
        padding: 10px 0;
      }
      .detail {
        background: #2a394b;
        padding: 10px;
        display: flex;
        flex-direction: column;
      }
      div {
        display: flex;
        padding-bottom: 10px;
        & > span:first-child {
          padding-right: 20px;
          color: #c7c7c7;
        }
        span {
          text-align: left;
        }
      }
    }
  }
}
</style>
